{% extends "base.html" %}

{% block title %}护理员信息 - 长者照护计划系统{% endblock %}

{% block page_title %}护理员信息{% endblock %}

{% block extra_css %}
<style>
    .filter-section {
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid var(--tech-border);
        border-radius: 5px;
        background-color: rgba(1, 1, 43, 0.75);
    }
    
    .caregiver-table {
        font-size: 0.9rem;
        color: #fff;
    }
    
    .caregiver-table th, .caregiver-table td {
        padding: 0.5rem;
        border: 1px solid var(--tech-border);
    }
    
    .caregiver-table th {
        background-color: rgba(5, 238, 255, 0.1);
        color: var(--tech-primary);
    }
    
    .caregiver-row:nth-child(odd) {
        background-color: rgba(1, 1, 43, 0.6);
    }
    
    .caregiver-row:hover {
        background-color: rgba(5, 238, 255, 0.1);
    }
    
    .level-badge {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
    }
    
    .level-1 { background-color: #28a745; color: white; }
    .level-2 { background-color: #17a2b8; color: white; }
    .level-3 { background-color: #ffc107; color: #212529; }
    .level-4 { background-color: #fd7e14; color: white; }
    .level-5 { background-color: #dc3545; color: white; }
    
    .form-control, .form-select {
        background-color: rgba(1, 1, 43, 0.7);
        border: 1px solid var(--tech-border);
        color: #fff;
    }
    
    .form-control:focus, .form-select:focus {
        background-color: rgba(1, 1, 43, 0.9);
        border-color: var(--tech-primary);
        color: #fff;
        box-shadow: 0 0 10px rgba(5, 238, 255, 0.5);
    }
    
    .form-label {
        color: var(--tech-primary);
        font-weight: 500;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="tech-card">
            <div class="tech-card-header">
                <h5 class="card-title"><i class="fas fa-user-nurse me-2"></i>护理员信息</h5>
            </div>
            <div class="tech-card-body">
                <div class="filter-section">
                    <form id="caregiverFilterForm">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="name" class="form-label">姓名</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="输入护理员姓名">
                            </div>
                            <div class="col-md-4">
                                <label for="level" class="form-label">技能级别</label>
                                <select class="form-select" id="level" name="level">
                                    <option value="">全部</option>
                                    <option value="1">1级</option>
                                    <option value="2">2级</option>
                                    <option value="3">3级</option>
                                    <option value="4">4级</option>
                                    <option value="5">5级</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">&nbsp;</label>
                                <div class="d-grid">
                                    <button type="button" id="filterButton" class="btn tech-btn tech-btn-primary">筛选</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-bordered caregiver-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>技能级别</th>
                                <th>工作经验</th>
                            </tr>
                        </thead>
                        <tbody id="caregiverTableBody">
                            {% for caregiver in caregivers %}
                            <tr class="caregiver-row" data-name="{{ caregiver.name }}" data-level="{{ caregiver.level }}">
                                <td>{{ caregiver.id }}</td>
                                <td>{{ caregiver.name }}</td>
                                <td>{{ caregiver.sex }}</td>
                                <td>{{ caregiver.age }}</td>
                                <td><span class="level-badge level-{{ caregiver.level }}">{{ caregiver.level }}</span></td>
                                <td>{{ caregiver.years }}年</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        <span class="text-light">显示 <span id="visibleCount">{{ caregivers|length }}</span> 条记录，共 <span id="totalCount">{{ caregivers|length }}</span> 条记录</span>
                    </div>
                    <div>
                        <button id="exportButton" class="btn tech-btn tech-btn-success">
                            <i class="fas fa-file-excel"></i> 导出到Excel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 记录总数
        const totalCount = $('.caregiver-row').length;
        $('#totalCount').text(totalCount);
        
        // 筛选按钮点击事件
        $('#filterButton').click(function() {
            const name = $('#name').val().toLowerCase();
            const level = $('#level').val();
            
            // 筛选表格行
            let visibleCount = 0;
            $('.caregiver-row').each(function() {
                const rowName = $(this).data('name').toLowerCase();
                const rowLevel = $(this).data('level').toString();
                
                const nameMatch = !name || rowName.includes(name);
                const levelMatch = !level || rowLevel === level;
                
                if (nameMatch && levelMatch) {
                    $(this).show();
                    visibleCount++;
                } else {
                    $(this).hide();
                }
            });
            
            // 更新显示计数
            $('#visibleCount').text(visibleCount);
        });
        
        // 导出到Excel按钮点击事件
        $('#exportButton').click(function() {
            // 获取可见行
            const visibleRows = $('.caregiver-row:visible');
            
            // 如果没有可见行，则提示
            if (visibleRows.length === 0) {
                alert('没有可导出的数据');
                return;
            }
            
            // 创建CSV内容
            let csvContent = 'ID,姓名,性别,年龄,技能级别,工作经验\n';
            
            visibleRows.each(function() {
                const id = $(this).find('td:eq(0)').text();
                const name = $(this).find('td:eq(1)').text();
                const sex = $(this).find('td:eq(2)').text();
                const age = $(this).find('td:eq(3)').text();
                const level = $(this).find('td:eq(4)').text().trim();
                const years = $(this).find('td:eq(5)').text();
                
                csvContent += `${id},${name},${sex},${age},${level},${years}\n`;
            });
            
            // 创建下载链接
            const encodedUri = encodeURI('data:text/csv;charset=utf-8,' + csvContent);
            const link = document.createElement('a');
            link.setAttribute('href', encodedUri);
            link.setAttribute('download', '护理员信息.csv');
            document.body.appendChild(link);
            
            // 点击下载链接
            link.click();
            
            // 移除下载链接
            document.body.removeChild(link);
        });
    });
</script>
{% endblock %}
